// Copyright (c) 2020 Wang Zemin Personal. All Right Reserved

import * as React from "react";
import {Button, Card, Col, DatePicker, Form, Input, Row, Select, Table} from "antd";
import {
    MessageOutlined,
    ReloadOutlined,
    SearchOutlined,
    SecurityScanOutlined,
    UserOutlined,
    WifiOutlined
} from "@ant-design/icons";
import {fetchAllBudgetAuditingLog} from "../../requests/BudgetManageRequest";

// import CreateVerifyKeyModal from "./CreateVerifyKeyModal";

export default class VerifyKeyBudgetAuditingLogPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keys: [],
            pagination: {current: 1, pageSize: 10},
            searchFromRef: React.createRef(),
            isOwn: false,
            filters: {}
        };
    }

    componentDidMount = () => {
        this.refreshKeyData()
    }


    onTableChange = (pagination) => {
        this.setState({pagination: pagination}, ()=>this.refreshKeyData(this.state.filters));
    }

    refreshKeyData = (filters = {}) => {
        console.log("List all auditing log." + filters)
        fetchAllBudgetAuditingLog(this.state.pagination, filters)
            .then((keyDomains) => {
                let fetchKeys = keyDomains.result.map((userDomain) => this.toTableElement(userDomain))
                this.setState({
                    keys: fetchKeys, pagination: {
                        current: keyDomains.pageNo,
                        pageSize: keyDomains.pageSize,
                        total: keyDomains.total
                    }
                })
            })
    }

    searchKeys = (filters) => {
        console.log("Begin to refresh data with filter:" + JSON.stringify(filters))
        this.setState({
            filters: filters,
            pagination: {current: 1, pageSize: 10}
        },()=>this.refreshKeyData(filters))
    }

    resetSearchKeys = () => {
        this.state.searchFromRef.current.resetFields();
    };


    toTableElement = (budgetAuditingDomain) => {
        return {
            "userName": budgetAuditingDomain.userName,
            "createTime": budgetAuditingDomain.createTime,
            "createBy": budgetAuditingDomain.createBy,
            "changedFieldDisplayName": budgetAuditingDomain.changedFieldDisplayName,
            "beforeChange": budgetAuditingDomain.beforeChange,
            "afterChange": budgetAuditingDomain.afterChange,
            "action": budgetAuditingDomain.action,
            "sourceIp": budgetAuditingDomain.sourceIp,
            "uuid": budgetAuditingDomain.uuid,
        }
    }


    render = () => {
        let pagination = this.state.pagination
        const keyColumns = [
            {
                title: '预算用户',
                dataIndex: 'userName',
                key: 'userName',
            },
            {
                title: '明细产生时间',
                dataIndex: 'createTime',
                key: 'createTime',
            },
            {
                title: '操作人',
                dataIndex: 'createBy',
                key: 'createBy',
            },
            {
                title: '变更操作',
                dataIndex: 'action',
                key: 'action',
            },
            {
                title: '变更信息',
                dataIndex: 'changedFieldDisplayName',
                key: 'changedFieldDisplayName',
            },
            {
                title: '变更前',
                dataIndex: 'beforeChange',
                key: 'beforeChange',
            }, {
                title: '变更后',
                dataIndex: 'afterChange',
                key: 'afterChange',
            },
            {
                title: 'IP地址',
                dataIndex: 'sourceIp',
                key: 'sourceIp',
            }]


        return (
            <div style={{padding: 10, margin: 10}}>
                <Card title="预算明细搜索条件">
                    <Form name="basic" ref={this.state.searchFromRef} layout="inline" onFinish={this.searchKeys}
                          style={{marginTop: 10, marginBottom: 10, width: '100%', border: "1", borderColor: "#000000"}}>

                        <Row style={{width: '100%'}}>

                            <Col span={8} offset={1}>
                                <Form.Item name="userName">
                                    <Input prefix={<SecurityScanOutlined/>} placeholder="预算用户"
                                           style={{width: '98%'}}/>
                                </Form.Item>
                            </Col>
                            <Col span={3} offset={1}>
                                <Form.Item name="createBy" style={{width: '95%'}}>
                                    <Input prefix={<UserOutlined/>} placeholder="操作人"/>
                                </Form.Item>
                            </Col>
                            <Col span={6} offset={1}>
                                <Form.Item name="createTimeRange" style={{width: '95%'}}>
                                    <DatePicker.RangePicker placeholder={["创建时间", "创建时间"]}/>
                                </Form.Item>
                            </Col>

                        </Row>
                        <Row style={{width: '100%'}}>


                            <Col span={3} offset={1}>
                                <Form.Item name="changedFieldDisplayName" style={{width: '95%', marginTop: 20}}>
                                    <Input prefix={<MessageOutlined/>} placeholder="变更信息"/>
                                </Form.Item>
                            </Col>


                            <Col span={4} offset={1}>
                                <Form.Item name="sourceIp" style={{width: '95%', marginTop: 20}}>
                                    <Input prefix={<WifiOutlined/>} placeholder="操作人IP"/>
                                </Form.Item>
                            </Col>

                            <Col span={3} offset={1}>
                                <Form.Item name="action" style={{marginTop: 20}}>
                                    <Select placeholder="操作" allowClear>
                                        <Select.Option value="CREATE">创建预算</Select.Option>
                                        <Select.Option value="UPDATE">更新预算</Select.Option>
                                        <Select.Option value="USE">使用预算</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={2} offset={1}>
                                <Form.Item style={{marginTop: 20}}>
                                    <Button type="primary" icon={<SearchOutlined/>} htmlType="submit"
                                            style={{backgroundColor: "#13ce66"}}>搜索</Button>
                                </Form.Item>
                            </Col>
                            <Col span={2}>
                                <Form.Item style={{marginTop: 20}}>
                                    <Button type="primary" icon={<ReloadOutlined/>} onClick={this.resetSearchKeys}
                                            style={{backgroundColor: "#ffba00"}}>重置</Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>

                </Card>

                <Card title="预算明细列表" style={{marginTop: 30, marginBottom: 10}}>
                    <Table
                        columns={keyColumns}
                        dataSource={this.state.keys}
                        rowKey={(record) => record.keyName + record.uuid}
                        onChange={this.onTableChange}
                        pagination={pagination}
                        size="small"
                    />
                </Card>

            </div>
        );
    }

}
